<template>
  <div>
    <!-- v-bind 属性的绑定 : -->
    <!-- v-on 事件的绑定 @ -->
    <!-- 只有事件回调函数只有一行的时候才可以这样写 -->
    <button type="button" v-on:click="count = count + 1">{{ count }}</button>
    <button type="button" v-on:click="count += 1">{{ count }}</button>
    <button type="button" v-on:click="count++">{{ count }}</button>

    <hr />

    <!-- 事件回调函数只要是有二行以上就用methods方式来写 -->
    <!-- 如果是在html中，this是不能写的，默认就会去data中找变量  -->
    <!-- 如果是js,必须要加this  -->
    <!-- 标准的写法 -->
    <button type="button" v-on:click="add">{{ count }}</button>
    <!-- 简写方式 缩写 -->
    <!-- 在vue中 add和 add()是一个意思 -->
    <button type="button" @click="add">{{ count }}</button>
    <button type="button" @click="add()">{{ count }}</button>

    <hr />
    <!-- 事件需要传参的时候就必须add(参数) -->
    <button type="button" @click="add1(2)">{{ count }}</button>

    <hr />
    <!-- 如果没有小括号,我们直接就可以得到一个事件对象 -->
    <!-- 如果有小括号,我们必须用一个固定的写法,叫$event代表的事件对象 -->
    <a href="http://www.baidu.com" @click="fn">超链接</a>
    <a href="http://www.baidu.com" @click="fn($event)">超链接</a>
    <!-- <a href="http://www.baidu.com" @click="fn(3,$event)">超链接</a> -->
  </div>
</template>

<script>
export default {
  // 数据
  data() {
    return {
      count: 1,
    };
  },
  // 事件方法
  methods: {
    add() {
      this.count++;
    },
    add1(num) {
      this.count += num;
    },
    fn(e) {
      console.log(e);
      e.preventDefault(); //阻止默认行为
      e.stopPropagation(); //阻止冒泡
    },
  },
};
</script>

<style scoped></style>
